<template>
	<view class="content">
		<uni-nav-bar fixed left-icon="left" class="unibarS" @clickLeft="backHandle">
			<view class="input-view">
				<u-search placeholder="搜索关键字" v-model="params.keyWords" shape="square" actionText="取消" @custom="customHandle" @search="searchHandle" :actionStyle="{ color: 'rgba(77, 172, 177, 1)' }"></u-search>
			</view>
		</uni-nav-bar>
		<view class="type-box">
			<u--image :src="'/static/img/crm/often_1.png'" width="96rpx" height="96rpx"></u--image>
			<view class="type-name">
				<view class="type-title">客户</view>
				<view class="type-num">共{{ total }}个结果</view>
			</view>
		</view>
        <view v-if="list.length" class="list">
			<view class="item" v-for="item in list" :key="item.id">
				<view class="item-top" @click="goCustomerDetail(item)">
						<view class="item-top-left">
							<view class="name">{{ item.customerName }}</view>
							<view class="rate">客户星级：<u-rate v-model="item.customerStarLevel" readonly
									activeColor="#FFC300"></u-rate></view>
							<view class="time">最后跟进：{{ item.latestFollowupTime }}</view>
						</view>
						<view class="item-top-right">
							<u-avatar :src="item.avatar"></u-avatar>
							<view class="salesman">{{ item.businessManagerName }}</view>
						</view>
					</view>
			</view>
			<uni-load-more :status="status" />
		</view>
		<empty-view v-else></empty-view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			params: {
				keyWords: '',
				pageNum: 1,
				pageSize: 20
			},
			total: 0,
			status: 'loading',
			refresh: false,
			list: [],
		}
	},
	onLoad: function (options) {
		this.bus_client_type = JSON.parse(uni.getStorageSync('bus_client_type'))
		this.bus_customer_status = JSON.parse(uni.getStorageSync('bus_customer_status'))
		this.bus_customer_starlevel = JSON.parse(uni.getStorageSync('bus_customer_starlevel'))
		if(options.keyword) {
			this.params.keyWords = options.keyword
			this.getData()
		} else {
			this.getData()
		}
    },

	onReachBottom() {
		console.log('上拉加载onReachBottom')
		if (this.status == 'noMore' || this.status == 'loading') return
		this.params.pageNum = this.params.pageNum + 1
		this.status = 'loading'
		this.getData()
	},

	methods: {
		getData() {
			this.$http.get('/app/customer/list', this.params).then(res => {
				if (res.code == 200) {
					this.list = [...this.list, ...res.rows]
					this.total = res.total
					if (this.total > this.list.length) {
						this.status = 'more'
					} else {
						this.status = 'noMore'
					}
				} else {
					uni.$u.toast(res.msg)
				}
			})
		},
		searchHandle() {
			this.params.pageNum = 1
			this.status = 'loading'
			this.list = []
			this.getData()
		},
		customHandle() {
			this.params.keyWords = ''
			this.searchHandle()
		},
		goCustomerDetail(item) {
			uni.navigateTo({
				url: '/pages/crm/customer/customerDetails?id=' + item.id
			})
		},
		backHandle() {
            uni.navigateBack()
        },
	}
}
</script>

<style lang="scss" scoped>

.unibarS {
	/deep/.uni-navbar__header {
		padding: 0 32rpx;
	}

	/deep/.uni-navbar__content {
		border-bottom: none !important;
		box-shadow: 0px 0px 4px rgba(136, 136, 136, 0.12);
	}
	/deep/.uni-navbar__header-btns-left {
		width: 20px !important;
	}
	/deep/.uni-navbar__header-btns-right {
		display: none;
	}
}

.input-view {
	width: 100%;
    display: flex;
    align-items: center;
	/deep/.u-tabs__wrapper__nav__item {
		flex: 1;
	}
	/deep/.u-tabs__wrapper__nav__line {
		background: rgba(77, 172, 177, 1) !important;
	}
}

.type-box {
	display: flex;
	padding: 0 32rpx;
	margin-top: 32rpx;
	.type-name {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 20rpx;
		.type-title {
			font-size: 32rpx;
			font-weight: 500;
			color: rgba(12, 16, 25, 1);
		}
		.type-num {
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(103, 117, 133, 1);
		}
	}
}

.list {
	padding-bottom: 32rpx;
}

.item {
	padding: 32rpx;
	border-radius: 24rpx;
	background: rgba(255, 255, 255, 1);
	margin-top: 32rpx;

	.item-top {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.item-top-left {
			flex: 1;
			margin-right: 20rpx;
			width: 0;

			.name {
				font-size: 32rpx;
				font-weight: 500;
				color: rgba(12, 16, 25, 1);
				margin-bottom: 32rpx;
				// 超出显示省略号
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.rate {
				display: flex;
				align-items: center;
				margin-bottom: 26rpx;
			}

			.rate,
			.time {
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(103, 117, 133, 1);
			}
		}

		.item-top-right {
			width: 150rpx;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: flex-end;

			.salesman {
				width: 100%;
				// 超出隐藏
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-align: right;
			}
		}
	}
}

</style>
